<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Collection Properties</title>
    <meta name="order" content="02" />
  </head>
  <body>
    <h2>Collection Properties</h2>
    <p> Shapes in a collection tend to have the same style such as same
      font, color, stroke style... To be convenient to
      stencil authors in this situation, Pencil supports grouping all
      shapes common style to collection style. These collection properties can be used as the default
      value for stencil properties. Then if collection style
      is changed, default property values for shapes will be changed accordingly.</p>
    <p>Have a look at this example. Collection properties are defined
      and then used in shape properties. </p>
    <pre name="code" language="xml">
<![CDATA[
<Shapes ...>
  <Properties>
    <PropertyGroup name="Text">
      <Property name="defaultTextFont"
                type="Font"
                displayName="Default Font">Arial|normal|normal|13px</Property>
      <Property name="defaultTextColor"
                type="Color"
                displayName="Default Text Color">#000000ff</Property>
    </PropertyGroup>
  </Properties>
  <Shape id="helloworld" displayName="Hello World" icon="Icons/plain-text.png">
    <Properties>
      <PropertyGroup name="Text">
        <Property name="label"
                  displayName="Label"
                  type="PlainText">Hello World</Property>
        <Property name="textColor"
                  displayName="Color"
                  type="Color"><E>$$defaultTextColor</E></Property>
        <Property name="textFont"
                  displayName="Font"
                  type="Font"><E>$$defaultTextFont</E></Property>
      </PropertyGroup>
    </Properties>

    <Behaviors>
      ...
    </Behaviors>

    <p:Content xmlns:p="http://www.evolus.vn/Namespace/Pencil" xmlns="http://www.w3.org/2000/svg">
      <text id="text" />
    </p:Content>
  </Shape>
</Shapes>
]]>
    </pre>
    <p>Text content inside the <code>&lt;Property&gt;</code> tag of a stencil is the literal presentation of the initial value for that property.
    In this example you can notice that the content inside that tag is a <code>&lt;E&gt;&lt;/E&gt;</code> instead. This is the notation to imply that
    the initial value should be obtained by evaluation the 'expression' inside the <code>&lt;E&gt;</code> tag. To reference a specific collection property
    in side this expression, the <code>$$</code> syntax is used.</p>
  </body>
</html>
